<template>
	<view id="page_main_id" class="page_main page_loading page_gradient" :class="{ can_show: render_req }">
		<pagelogin ref="pagelogin" @loginready="pagerefresh" @initcallback="com_pagelogin_initcallback($event)" need_login="0">
			<view class="page_content">
				<!-- <myScrollView :y_on="true" :height="`${change_var.win_height - change_var.page_content_top}`"> -->
				<!-- <mySafeArea></mySafeArea> -->

				<view class="page_content_view">
					<!-- :style="{ height: `${change_var.win_height - change_var.page_content_top}rpx` }" -->
					<view class="abs_view">
						<myimg imgsrc="/static/images/invite/share_bg.png" width="750" height="1786"></myimg>
					</view>
					<view class="share_view">
						<view class="share_top">
							<myimg imgsrc="/static/images/invite/share_title.png" width="570" height="125"></myimg>
						</view>
						<view class="share_envelope">
							<view class="abs_view">
								<myimg imgsrc="/static/images/invite/share_envelope.png" width="690" mode="widthFix"></myimg>
							</view>
							<view class="share_envelope_view">
								<view class="t1">好友{{ page_data.nickname }}送给你</view>
								<view class="t2">
									<smallUnit :num="page_data.less_money" unit="元" font="86" :ratio="0.5" bold num_color="#DD5300" position="bot"></smallUnit>
								</view>
								<view class="t3">优惠券</view>
								<view class="btn">
									<btns
										title="立即领取"
										btn_class=""
										height="74"
										:padding="[]"
										:btn_config="{ backgroundColor: '#FFCE66', width: '274rpx', border: '4rpx solid #ffffff' }"
										:txt_config="{ color: '#EE2B1F', fontSize: '42rpx', fontWeight: 'bold' }"
										@module_btn_click="scroll_input()"
									></btns>
								</view>
							</view>
						</view>
						<view class="share_tips">
							<view class="title_view">
								<myimg imgsrc="/static/images/invite/share_title_icon.png" width="38" height="30"></myimg>
								<view class="tt">优惠券</view>
								<myimg imgsrc="/static/images/invite/share_title_icon.png" width="38" height="30"></myimg>
							</view>
							<view class="tips_con">
								<block v-for="(item, index) in page_list" :key="index">
									<myModuleItem :item="item" :index="index" type="coupon_item_show" :coupon_select="false"></myModuleItem>
								</block>
							</view>
						</view>

						<view class="login_form_view">
							<view class="form_inp">
								<view class="area_code">+86</view>
								<input
									:adjust-position="false"
									class="inp"
									:focus="phone_focus"
									@blur="phone_blur($event)"
									type="number"
									placeholder="请输入手机号码"
									placeholder-class="placeholder"
									v-model="page_form.phone"
								/>
							</view>

							<view class="form_inp">
								<input
									:adjust-position="false"
									class="inp"
									type="number"
									placeholder="请输入验证码"
									placeholder-class="placeholder"
									v-model="page_form.code"
									maxlength="6"
								/>
								<view class="send_code" @click="send_code">
									{{ code_tips }}
								</view>
							</view>
						</view>

						<view class="btnview" id="bot_btn">
							<btns
								title="免费领取"
								btn_class=""
								height="92"
								:padding="com_padding_fun([30])"
								:btn_config="{ backgroundColor: '#FFE0C1' }"
								:txt_config="{ fontSize: '36rpx', color: '#EE083B', fontWeight: 'bold' }"
								@module_btn_click="register_now()"
							></btns>
						</view>
					</view>
				</view>
			</view>
		</pagelogin>
		<mypopup :on="pagepopup" :popup_type="-1" ani_position="center" ani_type="scale_ani" :popup_config="popup_config" @mask_click="hidepopup()" @close_click="hidepopup()">
			<view class="link_popup">
				<view class="link_popup_content">
					<view class="t1">优惠券已发放至账户</view>
					<view class="btnview">
						<btns
							title="下载APP使用"
							btn_class=""
							height="88"
							:padding="[]"
							:btn_config="{ backgroundColor: '#FFE0C1' }"
							:txt_config="{ fontSize: '36rpx', color: '#EE083B', fontWeight: 'bold' }"
							@module_btn_click="link_click()"
						></btns>
					</view>
				</view>

				<view class="close" @click="hidepopup()">
					<myimg imgsrc="/static/images/close.png" width="74"></myimg>
				</view>
			</view>
		</mypopup>
	</view>
</template>

<script>
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	data() {
		return {
			color_mode: 'day',
			change_var: {},
			scrollTop: 0,
			render_component_init: false,
			page_render: false,
			page_title: '邀请好友',
			render_req: false,
			nextreq: true,
			page_id: 0,
			page_form: { phone: '', code: '', token: '' },
			page_data: {},
			page_list: [],
			loadingstatus: 0,

			code_tips: '获取验证码',
			send_req: true,
			send_code_flag: false, //发送过验证码
			iTime: 59,
			iTime_task: null,

			pagepopup: false,
			popup_type: '',
			popup_config: {
				title: '',
				title_class: 'title_center',
			},
			phone_focus: false,
		};
	},
	created() {},
	onLoad(v) {
		this.init_pagedata();
		let { token } = this.getQueryVariable();
		this.page_form.token = token || '';
		// this.goweburl_f('/h5/test');
	},
	onShow() {
		let _this = this;
		this.com_onshow_fun();
	},
	onHide() {
		this.com_page_hide(this);
	},
	onPageScroll(e) {
		this.scrollTop = this.pxTorpx(e.scrollTop);
	},
	onPullDownRefresh() {
		this.pagerefresh(1);
	},
	computed: {},
	methods: {
		//页面刷新
		pagerefresh(type = 0) {
			let _this = this;
			_this.startPulldownJudge(type);
			_this.com_page_show(_this);
			_this.get_inviteinfo();
		},

		get_inviteinfo() {
			let _this = this;
			_this.com_getdata({
				url: '/invite.ashx',
				data: {
					Action: 'query',
					token: _this.page_form.token,
				},
				data_handle_on: false,
				data_fun: function (res) {
					if (res.state == 1) {
						_this.page_list = res.coupon_list;
						_this.page_data = {
							nickname: res.nickname,
							less_money: res.less_money,
						};
					} else {
					}
					_this.com_loading_fun({ mode: 0 });
				},
			});
		},

		async send_code() {
			let _this = this;
			if (!_this.page_check(_this.page_form.phone, 'phone')) return;
			if (!_this.com_loading({ status: 1, k: 'send_req', title: '发送中...', throttle: true })) return;
			let data = {
				phone: _this.page_form.phone,
				// type: 'register',
			};
			_this.send_code_flag = true;
			let response = await _this.com_getdata({
				url: '/base.ashx?action=send',
				data,
				data_handle_on: false,
			});
			_this.RemainTime();
			_this.com_loading_fun({
				mode: 2,
				k: 'send_req',
				title: '已发送',
				hide_time: 300,
				response,
				suc_icon: 'success',
				fail_icon: 'none',
				show_fail_msg: true,
				suc_callback: data => {
					return () => {
						// console.log(data);
					};
				},
				fail_callback: data => {},
			});
		},

		scroll_input() {
			let _this = this;
			let scrollTop = _this.change_var.page_height - _this.change_var.win_height;
			scrollTop = _this.rpxTopx(scrollTop);
			// console.log(scrollTop);
			// uni.pageScrollTo({
			// 	scrollTop,
			// 	duration: 500,
			// 	success: res => {
			// 		_this.phone_focus = true;
			// 	},
			// });
			_this.phone_focus = true;
		},
		phone_blur(event) {
			let _this = this;
			_this.phone_focus = false;
			console.log(event);
		},
		async register_now() {
			let _this = this;
			if (!_this.page_check(_this.page_form.phone, 'phone')) return;
			if (!_this.com_loading({ status: 1, k: 'nextreq', title: '领取中...', throttle: true })) return;
			let response = await _this.com_getdata({
				url: '/invite.ashx?action=register',
				method: 'POST',
				data: _this.page_form,
				data_handle_on: false,
			});
			_this.com_loading_fun({
				mode: 2,
				k: 'nextreq',
				title: '',
				hide_time: 300,
				response,
				suc_icon: 'none',
				fail_icon: 'none',
				show_fail_msg: true,
				suc_callback: data => {
					return async () => {
						_this.reset_status();
						_this.openpopup();
					};
				},
				fail_callback: data => {
					_this.page_form.code = '';
					_this.reset_status();
				},
			});
		},
		// 清除倒计时任务
		reset_status() {
			// this.loading = 0;
			// this.clear_task(this.iTime_task)
			this.RemainTime(true);
		},

		link_click() {
			let _this = this;
			_this.goweburl_f('https://www.qijiniu.com/app/index.html');
			_this.hidepopup();
		},
		openpopup(v) {
			let _this = this;
			_this.popup_type = v;
			// _this.popup_config['title'] = popup_title_config[v];
			_this.$nextTick(() => {
				_this.pagepopup = true;
			});
		},

		hidepopup() {
			let _this = this;
			try {
				if (_this.popup_type == 'order_filter') {
				} else {
					_this.popup_checked = '';
					_this.popup_checked_item = {};
				}
				_this.order_btn_click_data = {};
				_this.pagepopup = false;
			} catch (error) {
				console.log(error);
			}
		},
	},
	watch: {},
};
</script>

<style lang="scss">
.page_content {
	position: relative;
}

.page_content_view {
	position: relative;
}
.share_view {
	position: relative;
	z-index: 5;
	// padding: 0 12rpx;
}
.share_top {
	padding: 50rpx 0 30rpx;
}
.title_view {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 88rpx;
	font-weight: normal;
	font-size: 36rpx;
	color: #ffffff;
	line-height: 48rpx;
	.tt {
		margin: 0 48rpx;
	}
}
.share_envelope {
	position: relative;
	height: 468rpx;
	overflow: hidden;
	// height: 720rpx;
	.share_envelope_view {
		position: relative;
		z-index: 5;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 60rpx 0 0;
		height: 100%;
		.t1 {
			font-weight: bold;
			font-size: 28rpx;
			color: #da5200;
			line-height: 40rpx;
			max-width: 326rpx;
			text-align: center;
		}
		.t2 {
			margin-top: 10rpx;
			// font-weight: normal;
			// font-size: 160rpx;
			// color: #DD5300;
		}
		.t3 {
			margin-top: 10rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #dd5300;
		}
		.btn {
			position: absolute;
			left: 50%;
			bottom: 15rpx;
			transform: translate(-50%, 0);
		}
	}
}
.share_tips {
	// margin-top: 40rpx;
	margin: 0 10rpx;
	background-color: #fb6569;
	border-radius: 20rpx;
	padding: 10rpx 20rpx 20rpx;
	border: 2rpx solid #fb2f2f;
}

.login_form_view {
	padding: 30rpx;
	.form_inp {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		padding: 0 20rpx;
		// color: #fff;
		color: #000;
		background: #fff;
		height: 108rpx;
		// background: transparent;
		border-radius: 30rpx;
		// border: 2rpx solid #EAEDF2;

		& + .form_inp {
			margin-top: 28rpx;
		}

		.area_code {
			flex-shrink: 0;
			color: #999;
			display: flex;
			align-items: center;
			height: 100%;
			line-height: 1;
		}

		.pwd_icon {
			width: 40rpx;
			flex-shrink: 0;

			display: flex;
			align-items: center;

			.img {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.inp {
			flex: 1;
			padding: 0 20rpx;
			height: 100%;
		}

		.send_code {
			flex-shrink: 0;
			color: #ff5656;
		}
	}
}

.link_popup {
	.link_popup_content {
		width: 500rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 50rpx 68rpx 68rpx;
		.t1 {
			text-align: center;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			// line-height: 24rpx;
		}
		.btnview {
			margin-top: 50rpx;
		}
	}
	.close {
		margin-top: 65rpx;
	}
}
</style>
